<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>AJAX新规范</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    
    <script type="text/javascript">
        

        // 1. 声明实例
        var xhr = new XMLHttpRequest();
        // 2. 设置返回参数类型
        xhr.responseType = "json";
        // 3. 设置请求过程监听函数
        /* xhr.onreadystatechange = function (){
            // 如果请求过程完成且HTTP状态为成功
            if(xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.response);
            }
        } */
        // 4. 设置请求相关内容
        xhr.open("GET", "../lib/image/bom/m1.jpg");

        // 5. 发送请求
        xhr.send(null);

        // 超出 6s 终止请求
        // var timer = setTimeout(function (){
        //     if(xhr.readyState < 4){
        //         // 终止请求
        //         xhr.abort();
        //     }
        // }, 6000);

        // xhr.timeout 超时设定   xhr.ontimeout 监听超时事件
        xhr.timeout = 11000;
        xhr.ontimeout = function (){
            console.log("请求超时了");
        }

        // xhr.onload 监听到请求成功的函数
        xhr.onload = function (){
            if(xhr.status == 200){
                console.log(xhr.response);
            }else if(xhr.status == 404){
                console.log(xhr.status);
            }
        }

        // xhr.onerror 请求出现意外
        xhr.onerror = function (){
            // 输出状态码的英文描述
            console.log(xhr.statusText);
        }

        // xhr.onprogress 请求进度监听 event.lengthComputable / loaded / total
        xhr.onprogress = function (){
            console.log("进度事件是否可用", event.lengthComputable);
            if(event.lengthComputable){
                console.log("已加载字节数", event.loaded);
                console.log("全部需要加载的字节数", event.total);
            }
        }

        // xhr.onloadend
        xhr.onloadend = function (){
            // 请求结束就触发，不管是否请求成功  
            console.log("不论请求成功或者失败"); 
        }
    </script>
</body>
</html>